<template>
	<view class="page">
		<!-- 视频播放 start -->
		<view class="player">
			<video id="myTrailer" :src="trailerInfo.trailer" :poster="trailerInfo.poster" class="movie" controls></video>
		</view>
		<!-- 视频播放 end -->
		<!-- 影片基本信息 start -->
		<view class="movie-info">
			<navigator :url="'../cover/cover?cover=' + trailerInfo.cover">
			<image :src="trailerInfo.cover" class="cover"></image>
			</navigator>
			<view class="movie-desc">
				<view class="title">{{trailerInfo.name}}</view>
				<view class="basic-info">{{trailerInfo.bascicInfo}}</view>
				<view class="basic-info">{{trailerInfo.originalName}}</view>
				<view class="basic-info">{{trailerInfo.totalTime}}</view>
				<view class="basic-info">{{trailerInfo.releaseDate}}</view>
				<view class="score-block">
					<view class="big-score">
						<view class="score-words">
							综合评分:
						</view>
						<view class="movie-score">
							{{trailerInfo.score}}
						</view>
					</view>
					<view class="score-stars">
						<block v-if="trailerInfo.score>=0">
							<trailerStars :innerScore="trailerInfo.score" showNum="0"></trailerStars>
						</block>

						<view class="prise-counts">
							{{trailerInfo.prisedCounts}} 人点赞
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 影片基本信息 end -->
		<view class="line-wapper">
			<view class="line">
			</view>
		</view>
		<!-- 剧情介绍start -->
		<view class="plots-block">
			<view class="plots-title">
				剧情介绍
			</view>
			<view class="plots-desc">
				{{trailerInfo.plotDesc}}
			</view>
		</view>
		<!-- 剧情介绍end -->
		
		<!-- 演职人员start -->
		<view class="scroll-block">
			<view class="plots-title">演职人员</view>
			<scroll-view scroll-x="true" class="scroll-list">
				<view  v-for="(director,staffIndex) in directorArray" class="actor-wapper">
					<image :src="director.photo" class="single-actor" mode="aspectFill" @click="lookStaffs" :data-staffIdex="staffIndex"></image>
					<view class="actor-name">{{director.name}}</view>
					<view class="actor-role">{{director.actName}}</view>
				</view>
				<view v-for="(actor,actorIndex) in actorArray" class="actor-wapper">
					<image  :src="actor.photo" class="single-actor" mode="aspectFill" @click="lookStaffs" :data-staffIndex="actorIndex+directorArray.length"></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.actName}}</view>
				</view>
				
			</scroll-view>
		</view>
		
		<!-- 演职人员end -->
		
		
		<!-- 剧照start -->
		<view class="scroll-block">
			<view class="plots-title">剧照</view>
			<scroll-view scroll-x="true" class="scroll-list">
				<image v-for="(img,imgIndex) in plotPicsArray" :src="img" class="plot-image" mode="aspectFill" @click="lookMe" :data-imgIndex="imgIndex"></image>
			</scroll-view>
		</view>
		
		<!-- 剧照end -->
	</view>
</template>

<script>
	import trailerStars from '../../components/trailerStars.vue'
	export default {
		data() {
			return {
				trailerInfo: {},
				plotPicsArray: [], //剧照
				directorArray:[], //导演列表
				actorArray:[] //演员列表
				
				
			}
		},
		//页面初次渲染完成，获得视频上下文对象
		onReady() {
			this.videoContext = uni.createVideoContext('myTrailer')
		},
		onHide() {
			//页面被隐藏的时候暂停播放
			this.videoContext.pause()
		},
		onShow() {
			//页面被再次显示的时候播放
			if(this.videoContext){
				this.videoContext.play()
			}
		},
		onLoad(params) {
			var me = this
			// 获取上一个页面传入得参数
			var trailerId = params.trailerId
			//通过api获取导航栏属性
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#000000"
			})
			//获取预告片得详细信息
			var serverUrl = me.serverUrl
			uni.request({
				// /search/trailer/{trailerId}?qq=951473136
				url: serverUrl + '/search/trailer/' + trailerId + '?qq=951473136',
				method: "POST",
				success: (res) => {
					console.log(res.data)
					if (res.data.status == 200) {
						var trailerInfo = res.data.data
						me.trailerInfo = trailerInfo
						//把剧照的字符串转换为json arr
						var plotPicsArray = JSON.parse(trailerInfo.plotPics)
						me.plotPicsArray = plotPicsArray
						
					}
				},
			})
			
			//获取导演
			var serverUrl = me.serverUrl
			uni.request({
				// /search/trailer/{trailerId}?qq=951473136
				url: serverUrl + '/search/staff/' + trailerId +'/1?qq=951473136',
		 		method: "POST",
				success: (res) => {
					// console.log(res.data)
					if (res.data.status == 200) {
						me.directorArray = res.data.data
						
					}
				},
			
			})
			//获取演员
			var serverUrl = me.serverUrl
			uni.request({
				// /search/trailer/{trailerId}?qq=951473136
				url: serverUrl + '/search/staff/' + trailerId +'/2?qq=951473136',
				method: "POST",
				success: (res) => {
					// console.log(res.data)
					if (res.data.status == 200) {
						me.actorArray = res.data.data
						
					}
				},
			
			})
		},
		//仅仅只支持在小程序端的分享,分享到微信群或微信好友
		onShareAppMessage(res) {
			var me = this
			return {
				title:me.trailerInfo.name,
				path:'/pages/movie/movie?trailerId='+me.trailerInfo.id
			}
		},
		//监听导航栏的按钮
		onNavigationBarButtonTap(e) {
			var index = e.index
			var me = this
			var trailerInfo = me.trailerInfo
			var trailerId = me.trailerInfo.id
			var trailerName = me.trailerInfo.name
			var cover = trailerInfo.cover
			var poster = trailerInfo.poster
			// console.log(index)
			//index为0则分享
			if(index == 0){
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 0,
				    href: "http://www.imovietrailer.com/#/pages/movie/movie?trailerId="+trailerId,
				    title: "NEXT超英预告:《"+trailerName+"》",
				    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				    imageUrl: cover,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				});
			}
		},
		methods: {
			lookMe(e){
				var me = this
				var imgIndex = e.currentTarget.dataset.imgindex
				uni.previewImage({
					urls: me.plotPicsArray,
					current: me.plotPicsArray[imgIndex]
				})
			},
			lookStaffs(e) {
				var me = this
				var staffIndex = e.currentTarget.dataset.staffindex
				//拼接导演和演员的数组成为一个新数组
				var directorArray = me.directorArray
				var actorArray = me.actorArray
				var newStaffArray = []
				newStaffArray = newStaffArray.concat(directorArray).concat(actorArray)
				var urls = []
				for(var i=0;i<newStaffArray.length;i++){
					var tempPhoto = newStaffArray[i].photo
					urls.push(tempPhoto)
				}
				
				uni.previewImage({
					urls: urls,
					current: urls[staffIndex]
					
				})
				
			}
		},
		components: {
			trailerStars
		}
	}
</script>

<style scoped>
	.player {
		display: flex;
		justify-content: center;
		background-color: black;
	}

	.movie {
		width: 100%;
		height: 440upx;

	}

	/* 影片基本信息 start */
	.movie-info {
		padding: 40upx 20upx;
		display: flex;
		flex-direction: row;
		background-color: #f7f4f9;
	}

	.cover {
		width: 280upx;
		height: 380upx;

	}

	.movie-desc {
		display: flex;
		flex-direction: column;
		margin-left: 30upx;
		width: 400upx;

	}

	.title {
		font-size: 30px;
	}

	.basic-info {
		color: darkgray;
		font-size: 13px;
		line-height: 36upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 影片基本信息 end */
	/* 评分块 start */
	.score-block {
		background-color: white;
		margin-top: 20upx;
		width: 360upx;
		height: 90upx;
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		/* 追加阴影效果 */
		box-shadow: 3px 2px 10px #dedede;
	}

	.score-words {
		font-size: 12px;
		color: grey;
	}

	.movie-score {
		font-size: 26px;
		font-weight: bold;
		margin-left: 8upx;
		color: #FEAB2A;
		line-height: 60upx;
	}

	.prise-counts {
		font-size: 12px;
		color: grey;
		line-height: 44upx;
	}

	/* 评分块 end */
	/* 剧情介绍start */
	.plots-block {
		background-color: #F7F4F9;
		padding: 20upx 40upx;
	}
	.plots-title {
		color: #A9A9A9;
		font-size: 14px;
	}
	.plots-desc {
		margin-top: 10upx;
		font-size: 16px;
	}
	
	/* 剧情介绍end */
	/* 剧照start */
	.scroll-block {
		background-color: #F7F4F9;
		padding: 20upx 40upx;
/* 		display: flex;
		flex-direction: column; */
	}
	.scroll-list {
		width: 100%;
		white-space: nowrap;
		margin-top: 20upx;
	}
	.plot-image {
		width: 220upx;
		height: 320upx;
		margin-right: 10upx;
	}
	/* 剧照end */
	
	/* 演职人员start */
	.single-actor {
		width: 170upx;
		height: 240upx;
		margin-right: 10upx;
	}
	
	.actor-wapper {
		display: inline-block;
		
	}
	.actor-name {
		width: 170upx;
		text-align: center;
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.actor-role {
		width: 170upx;
		text-align: center;
		font-size: 13px;
		color: #A9A9A9;
	}
	/* 演职人员end */
</style>
